<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="bootstrap-select.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


    <!-- Latest compiled and minified JavaScript -->
    <script src="bootstrap-select.min.js" type="text/javascript"></script>

    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="defaults-zh_CN.min.js" type="text/javascript"></script>

</head>
<body>
<div style="margin:auto;padding: 50px;width: 100%;">
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
    <button class="remove">移除</button>
<button class="add">添加</button>
</div>

</body>
<script type="text/javascript">
    $('.selectpicker').selectpicker({
        style: 'btn-info',
        size: 4
    });
    $(".remove").click(function(){
        $('.selectpicker').find('option').remove();
        $('.selectpicker').selectpicker('refresh');
    });
    $(".add").click(function(){
        $('.selectpicker').append("<option>Relish</option>");
        $('.selectpicker').append('<optgroup label="Picnic"> '+'<option>Mustard</option><option>Ketchup</option> <option>Relish</option> </optgroup>');
        $('.selectpicker').selectpicker('refresh');
    });
</script>
</html>